/**
 * 底板管理页面JavaScript
 */

$(document).ready(function() {
    let currentTemplateId = null;
    let isEditMode = false;
    let selectedFile = null;

    // 文件选择变化事件
    $(document).on('change', '#templateImageFile', function(e) {
        console.log('文件选择变化事件触发');
        const file = e.target.files[0];
        if (file) {
            window.handleFileSelect(file);
        }
    });

    // 上传表单提交
    $(document).on('submit', '#uploadForm', function(e) {
        e.preventDefault();
        window.handleFileUpload();
    });

    // 手动创建表单提交
    $(document).on('submit', '#manualForm', function(e) {
        e.preventDefault();
        
        const formData = {
            name: $('#templateName').val().trim(),
            width: parseInt($('#templateWidth').val()),
            height: parseInt($('#templateHeight').val()),
            description: $('#templateDescription').val().trim()
        };

        // 验证数据
        if (!formData.name) {
            APP_UTILS.showError('请输入底板名称');
            return;
        }

        if (!formData.width || formData.width <= 0) {
            APP_UTILS.showError('请输入有效的宽度');
            return;
        }

        if (!formData.height || formData.height <= 0) {
            APP_UTILS.showError('请输入有效的高度');
            return;
        }

        const url = isEditMode ? `/templates/${currentTemplateId}/edit` : '/templates/create';
        const method = 'POST';

        APP_UTILS.showLoading(isEditMode ? '保存中...' : '创建中...');

        APP_AJAX.request(method, url, formData)
            .then(response => {
                APP_UTILS.hideLoading();
                if (response.success) {
                    APP_UTILS.showSuccess(isEditMode ? '底板更新成功' : '底板创建成功');
                    $('#templateModal').modal('hide');
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } else {
                    APP_UTILS.showError(response.error || '操作失败');
                }
            })
            .catch(error => {
                APP_UTILS.hideLoading();
                APP_UTILS.showError(error.error || '操作失败');
            });
    });

    // 编辑底板按钮
    $('.edit-template').on('click', function(e) {
        e.preventDefault();
        const templateId = $(this).data('template-id');
        
        // 获取底板数据并填充表单
        const templateCard = $(this).closest('.template-card');
        const templateName = templateCard.find('.card-header h6').text().trim();
        
        // 从预览文本中提取尺寸信息
        const sizeText = templateCard.find('.preview-text').text();
        const sizeMatch = sizeText.match(/(\d+)×(\d+)/);
        
        if (sizeMatch) {
            const width = sizeMatch[1];
            const height = sizeMatch[2];
            
            // 填充表单
            $('#templateId').val(templateId);
            $('#templateName').val(templateName);
            $('#templateWidth').val(width);
            $('#templateHeight').val(height);
            
            // 设置模态框标题和状态
            $('#modalTitle').text('编辑底板');
            $('#submitText').text('保存修改');
            isEditMode = true;
            currentTemplateId = templateId;
            
            // 显示模态框
            $('#templateModal').modal('show');
        }
    });

    // 删除底板按钮
    $('.delete-template').on('click', function(e) {
        e.preventDefault();
        const templateId = $(this).data('template-id');
        const templateName = $(this).data('template-name');
        
        APP_UTILS.confirm(`确定要删除底板"${templateName}"吗？\n删除后将同时删除所有相关的定制区域，此操作不可撤销。`, () => {
            APP_UTILS.showLoading('删除中...');
            
            APP_AJAX.post(`/templates/${templateId}/delete`)
                .then(response => {
                    APP_UTILS.hideLoading();
                    if (response.success) {
                        APP_UTILS.showSuccess('底板删除成功');
                        setTimeout(() => {
                            location.reload();
                        }, 1000);
                    } else {
                        APP_UTILS.showError(response.error || '删除失败');
                    }
                })
                .catch(error => {
                    APP_UTILS.hideLoading();
                    APP_UTILS.showError(error.error || '删除失败');
                });
        });
    });

    // 模态框关闭时重置表单
    $('#templateModal').on('hidden.bs.modal', function() {
        $('#templateForm')[0].reset();
        $('#templateId').val('');
        $('#modalTitle').text('创建底板');
        $('#submitText').text('创建底板');
        isEditMode = false;
        currentTemplateId = null;
        updateSizePreview();
    });

    // 尺寸输入变化时更新预览
    $('#templateWidth, #templateHeight').on('input', updateSizePreview);

    function updateSizePreview() {
        const width = parseInt($('#templateWidth').val()) || 0;
        const height = parseInt($('#templateHeight').val()) || 0;
        
        const previewBox = $('#sizePreview .preview-box');
        const previewText = $('#sizePreview .preview-text');
        
        if (width > 0 && height > 0) {
            // 计算预览比例（最大300px）
            const maxSize = 200;
            let previewWidth, previewHeight;
            
            if (width > height) {
                previewWidth = Math.min(width, maxSize);
                previewHeight = (height * previewWidth) / width;
            } else {
                previewHeight = Math.min(height, maxSize);
                previewWidth = (width * previewHeight) / height;
            }
            
            previewBox.css({
                width: previewWidth + 'px',
                height: previewHeight + 'px'
            });
            
            previewText.text(`${width}×${height} px`);
        } else {
            previewBox.css({
                width: 'auto',
                height: 'auto'
            });
            previewText.text('输入尺寸查看预览');
        }
    }

    // 初始化预览
    updateSizePreview();

    // 简化的文件处理函数
    window.handleFileSelect = function(file) {
        console.log('全局handleFileSelect被调用:', file.name);
        
        // 验证文件类型
        const fileExtension = file.name.toLowerCase().split('.').pop();
        const allowedExtensions = ['psd', 'psb', 'tif', 'tiff', 'png', 'jpg', 'jpeg', 'gif', 'webp'];
        
        if (!allowedExtensions.includes(fileExtension)) {
            alert('不支持的文件格式，请选择 PSD、PSB、TIF、PNG、JPG 等图片文件');
            return;
        }
        
        // 验证文件大小
        if (file.size > 50 * 1024 * 1024) {
            alert('文件太大，请选择小于50MB的文件');
            return;
        }
        
        selectedFile = file;
        
        // 显示预览
        window.showFilePreview(file);
        
        // 启用提交按钮
        $('#uploadSubmitBtn').prop('disabled', false);
        
        // 自动填充名称
        if (!$('#uploadTemplateName').val()) {
            const nameWithoutExt = file.name.replace(/\.[^/.]+$/, "");
            $('#uploadTemplateName').val(nameWithoutExt);
        }
    };


    window.showFilePreview = function(file) {
        console.log('显示文件预览:', file.name);
        const reader = new FileReader();
        
        reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
                $('#previewImage').attr('src', e.target.result);
                $('#previewFilename').text(file.name);
                $('#previewDimensions').text(`${img.width} × ${img.height} px`);
                $('#previewFileSize').text(APP_UTILS.formatFileSize(file.size));
                $('#uploadPreview').show();
                console.log('预览显示成功');
            };
            img.onerror = function() {
                console.error('图片预览加载失败');
            };
            img.src = e.target.result;
        };
        
        reader.readAsDataURL(file);
    };

    window.handleFileUpload = function() {
        if (!selectedFile) {
            APP_UTILS.showError('请选择文件');
            return;
        }
        
        const name = $('#uploadTemplateName').val().trim();
        if (!name) {
            APP_UTILS.showError('请输入底板名称');
            return;
        }
        
        const formData = new FormData();
        formData.append('template_image', selectedFile);
        formData.append('name', name);
        formData.append('description', $('#uploadTemplateDescription').val().trim());
        
        APP_UTILS.showLoading('上传中...');
        
        // 显示进度条
        $('#uploadProgress').show();
        
        $.ajax({
            url: '/upload_template_image',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function() {
                const xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        const percentComplete = (e.loaded / e.total) * 100;
                        $('.progress-bar').css('width', percentComplete + '%');
                    }
                });
                return xhr;
            },
            success: function(response) {
                APP_UTILS.hideLoading();
                if (response.success) {
                    APP_UTILS.showSuccess('底板上传成功');
                    $('#templateModal').modal('hide');
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } else {
                    APP_UTILS.showError(response.error || '上传失败');
                }
            },
            error: function(xhr) {
                APP_UTILS.hideLoading();
                const response = xhr.responseJSON || {};
                APP_UTILS.showError(response.error || '上传失败');
            }
        });
    }
});

/**
 * 底板卡片悬停效果
 */
$(document).on('mouseenter', '.template-card', function() {
    $(this).addClass('shadow-lg');
}).on('mouseleave', '.template-card', function() {
    $(this).removeClass('shadow-lg');
});

/**
 * 搜索功能（如果需要的话）
 */
function searchTemplates(query) {
    const cards = $('.template-card');
    
    if (!query.trim()) {
        cards.show();
        return;
    }
    
    query = query.toLowerCase();
    
    cards.each(function() {
        const card = $(this);
        const name = card.find('.card-header h6').text().toLowerCase();
        const description = card.find('.card-text').text().toLowerCase();
        
        if (name.includes(query) || description.includes(query)) {
            card.show();
        } else {
            card.hide();
        }
    });
}
